<template>
  <div id="navList">
    <el-menu
      :default-active="routerDefault"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      background-color="rgb(0, 21, 41)"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      :collapse-transition="false"
      :collapse="isCollapse"
      :unique-opened="true"
    >
      <!-- 一级 -->
      <el-submenu :index="item.path" v-for="(item, index) in list" :key="index">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span>{{ item.title }}</span>
        </template>
        <!-- 二级 -->
        <template v-for="(ite, inde) in item.children">
          <el-submenu :index="ite.path" :key="inde" v-if="ite.children">
            <template slot="title">
              <i :class="`el-icon-${ite.icon}`"></i>
              <span>{{ ite.title }}</span></template
            >
            <template v-for="(it, ind) in ite.children">
              <el-submenu :index="it.path" :key="ind" v-if="it.children">
                <template slot="title">
                  <i :class="`el-icon-${it.icon}`"></i>
                  <span>{{ it.title }}</span></template
                >
                <template v-for="(last, index1) in it.children">
                  <el-submenu
                    :index="last.path"
                    :key="index1"
                    v-if="last.children"
                  >
                    <template slot="title">
                      <i :class="`el-icon-${last.icon}`"></i>
                      <span>{{ last.title }}</span></template
                    >
                  </el-submenu>
                  <el-menu-item :index="last.path" :key="index1" v-else>{{
                    last.title
                  }}</el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item :index="it.path" :key="ind" v-else>{{
                it.title
              }}</el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item :index="ite.path" :key="inde" v-else>{{
            ite.title
          }}</el-menu-item>
        </template>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    ...mapState("article", ["isCollapse", "routerDefault"]),
    // isShow() {
    //   return isCollapse;
    // },
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-scrollbar__wrap {
  overflow: scroll;
  height: 100%;
}
</style>